<template>
	<div>
		<div>reactive</div>
		<div>{{ state2.foo }} + {{ state2.nested.bar }}</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRef, shallowReactive, isReactive } from 'vue'
let origin = {
	a: 1,
	b: ref(11),
	c: [ref(22)],
}

const state = reactive(origin)

// 重复代理会返回之前的代理对象
console.log(state === reactive(origin)) // true
console.log(state === reactive(state)) // true
console.log(reactive(origin) === reactive(origin)) // true

// 双向 ref，会与源属性同步
const fooRef = toRef(state, 'a')
// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.a) // 2
// 更改源属性也会更新该 ref
state.a++
console.log(fooRef.value) // 3

console.log(state.b) // 11 自动解包，不需要.value
console.log(state.c[0].value) // 22 无法自动解包，需要.value

// 每个属性都会被代理
const proxy = reactive<Record<string, unknown>>({})
const raw = {}
proxy.nested = raw // 这里赋值后就会被代理了，所以结果是false
console.log(proxy.nested, proxy.nested === raw) // false

// TODO 浅层响应
const state2 = shallowReactive({
	foo: 1,
	nested: {
		bar: 2,
	},
})
// 更改状态自身的属性是响应式的
state2.foo++
// 不是响应式的
state2.nested.bar++
// ...但下层嵌套对象不会被转为响应式
console.log(isReactive(state2.nested)) // false
</script>
